<template>
  <div class="loginMain" v-show="pwdShowStatus">
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_phone.png" class="img">
      <input type="text" @change="onInput" class="username" v-model="loginData.phone" placeholder="请输入手机号码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_key.png" class="img">
      <input type="password" @change="onInput" class="pwd" v-model="loginData.pwd" placeholder="密码" autocomplete="new-password">
    </div>
  </div>
</template>
<script>
import { XInput, Group } from './../../../components'

export default {
  props: {
    pwdShowStatus: Boolean
  },
  data () {
    return {
      loginData: {
        phone: "",
        pwd: ""
      }
    }
  },
  components: {
    XInput,
    Group
  },
  created: function () {
    console.log(this.pwdShowStatus)
  },
  methods: {
    onInput () {
      this.$emit('message', this.loginData)
    }
  }
}
</script>
<style>
  .loginMain {
    position: relative;
    width: 100%;
  }
  .loginMain .input-box {
    display: flex;
    padding: 1rem 0;
    margin: 0 1rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .loginMain .input-box .img {
    width: 2.4rem;
    height: 2.4rem;
    padding-top: 3px;
  }
  .loginMain .input-box input {
    flex: 1;
    border: 0;
    outline: none;
    padding-left: 1rem;
    background-color: #fff;
    font-family: "微软雅黑";
    height: 2.4rem;
    font-size: 1.4rem;
    padding-top: 3px;
  }
</style>